<template>
  <el-dialog
    :title="dataForm.name+'的详情'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick" class="memberDetail" v-loading="loading">
      <el-tab-pane label="会员概要" name="1">
        <el-row style="padding: 18px 0px;">
          <el-col :span="8" style="text-align: center;">
            <img :src="dataForm.img" alt="" style="with:80px;height:80px;border-radius: 50%;margin-top: 25%;" />
          </el-col>
          <el-col :span="16">
              <el-row>
                <el-col :span="12">
                  会员姓名：{{dataForm.name}}
                </el-col>
                <el-col :span="12">
                  联系电话：{{dataForm.tel}}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  会员等级：{{dataForm.levelName}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  累计积分：{{dataForm.totalScore}}
                </el-col>
                <el-col :span="12">
                  可用积分：{{dataForm.score}}
                </el-col>
              </el-row>


              <el-row>
                <el-col :span="12">
                  累计余额：¥{{parseFloat(dataForm.totalBalance).toFixed(2)}}
                </el-col>
                <el-col :span="12">
                  可用余额：¥{{parseFloat(dataForm.balance).toFixed(2)}}
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  消费金额：<span style="color: red;">¥{{parseFloat(dataForm.totalBalance - dataForm.balance).toFixed(2)}}</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  消费次数：{{consumption.count}}</span>
                </el-col>
              </el-row>
          </el-col>
        </el-row>
        <el-divider></el-divider>
        <p>上次消费：{{consumption.day}} [ 距今: {{consumption.dayNum}} ]</p>
      </el-tab-pane>
      <el-tab-pane label="详细信息" name="2">
        <el-row style="padding: 18px 0px;">
          <el-col :span="8" style="text-align: center;">
            <img :src="dataForm.img" alt="" style="with:80px;height:80px;border-radius: 50%;margin-top: 25%;" />
          </el-col>
          <el-col :span="16" v-if="!editFlag">
              <el-row>
                <el-col :span="12">
                  会员姓名：{{dataFormInfo.name}}
                </el-col>
                <el-col :span="12">
                  会员卡号：{{dataFormInfo.cardNo}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  联系电话：{{dataFormInfo.mobile}}
                </el-col>
                <el-col :span="12">
                  注册时间：{{dataForm.createDate}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  证件号码：{{dataFormInfo.certificateNo}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  会员地址：{{dataFormInfo.address}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  会员来源：{{dataFormInfo.source}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  所属门店：{{ dataForm.sellerName ? dataForm.sellerName : '管理员' || '--' }}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-button type="primary" size="mini" icon="el-icon-edit" @click="editFlag=true" circle></el-button>
                </el-col>
              </el-row>

          </el-col>

          <el-col :span="16" v-if="editFlag">
            <el-form :model="dataFormInfo" :label-position="'left'" label-width="83px" class="dataFormInfo">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="会员姓名：">
                    <el-input size="mini" v-model="dataFormInfo.name" placeholder="会员姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  会员卡号：{{dataFormInfo.cardNo}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item label="联系电话：">
                    <el-input size="mini" v-model="dataFormInfo.mobile" placeholder="联系电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  注册时间：{{dataForm.createDate}}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="证件号码：">
                    <el-input size="mini" v-model="dataFormInfo.certificateNo" placeholder="证件号码"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-form-item label="会员地址：">
                    <el-input size="mini" v-model="dataFormInfo.address" placeholder="会员地址"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  会员来源：{{ dataForm.source ? dataForm.source : '暂无' }}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  所属门店：{{ dataForm.sellerName ? dataForm.sellerName : '管理员' || '--' }}
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-button type="success" size="mini" icon="el-icon-check" @click="dataFormSubmit" circle></el-button>
                  <el-button type="info" size="mini" icon="el-icon-close" @click="editFlag=false" circle></el-button>
                </el-col>
              </el-row>

            </el-form>

          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="消费记录" name="3">
        <hotelorder ref="hotelorder"></hotelorder>
      </el-tab-pane>
      <el-tab-pane label="会员储值" name="4">
        <recharge ref="recharge"></recharge>
      </el-tab-pane>
      <el-tab-pane label="积分明细" name="5">
        <score ref="score"></score>
      </el-tab-pane>
      <el-tab-pane label="短信记录" name="6">
        <smshistory ref="smshistory"></smshistory>
      </el-tab-pane>
    </el-tabs>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false,activeName='1'">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import hotelorder from './memberDetailInfo/order';
import smshistory from './memberDetailInfo/smshistory';
import score from './memberDetailInfo/score';
import recharge from './memberDetailInfo/recharge';
export default {
  data() {
    return {
      visible: false,
      editFlag:false,
      dataForm:{},
      dataFormInfo:{},
      activeName:"1",
      consumption:{
        count:0,
        day:'2017-08-06',
        dayNum:0
      },
      loading:false
    };
  },
  components: {
    hotelorder,
    smshistory,
    score,
    recharge,
  },
  methods: {
    //查询订单消费记录
    //提交表单
    dataFormSubmit(){
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(
          `/hotel/hotelmemberleveldetail/update`
        ),
        method: "post",
        data: this.$http.adornData({
          id: this.dataFormInfo.id,
          certificateNo: this.dataFormInfo.certificateNo,
          name: this.dataFormInfo.name,
          mobile: this.dataFormInfo.mobile,
          address: this.dataFormInfo.address,
          status:1
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.editFlag = false
        } else {
          this.$message.error(data.msg);
        }
        this.loading = false
      });
    },
    //查询信息
    info(){
      this.loading = true
      this.$http({
        url: this.$http.adornUrl(
          `/hotel/hotelmemberleveldetail/info/${this.dataForm.id}`
        ),
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          console.log(data)
          this.dataFormInfo = data.hotelMemberLevelDetail
        }
        this.loading = false
      });
    },
    //查询消费次数
    searchConsumptionCounts(){
      this.loading = true
      console.log(this.dataForm)
      this.$http({
        url: this.$http.adornUrl(`/hotel/hotelmemberleveldetail/searchConsumptionCounts`),
        method: "post",
        data: this.$http.adornData({
          memberId: this.dataForm.userId,
          sellerId: this.dataForm.sellerId,
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          console.log(data)
          this.consumption.count = data.count
          this.consumption.day = data.day
          this.consumption.dayNum = data.dayNum
        }
        this.loading = false
      })
    },
    handleClick(tab, event) {
      console.log(tab.index)
      switch(tab.index){
        case "0":
          this.searchConsumptionCounts();
          break
        case "1":
          console.log('case 1')
          this.info()
          break
        case "2":
          console.log('case 2')
          this.$nextTick(() => {
            this.$refs.hotelorder.init(this.dataForm.userId,this.dataFormInfo.sellerId,this.consumption.count);
          });
          break
        case "3":
          console.log('case 3')
          this.$nextTick(() => {
            this.$refs.recharge.init(this.dataForm.userId,this.dataFormInfo.sellerId,parseFloat(this.dataForm.totalBalance).toFixed(2),parseFloat(this.dataForm.balance).toFixed(2),this.dataForm.sellerName);
          });
          break
        case "4":
          console.log('case 4')
          this.$nextTick(() => {
            this.$refs.score.init(this.dataForm.userId,this.dataFormInfo.sellerId,this.dataForm.totalScore,this.dataForm.score,this.dataForm.sellerName);
          });
          break
        case "5":
          console.log('case 5')
          this.$nextTick(() => {
            this.$refs.smshistory.init(this.dataForm.tel,this.dataFormInfo.sellerId);
          });
          break
      }
      console.log(tab, event);
    },
    init(row) {
      this.visible = true;
      this.activeName = "1"
      this.$nextTick(() => {
        this.dataForm = row
        this.searchConsumptionCounts();
        this.info()
        console.log(this.dataForm)
      });
    },
  }
};
</script>

<style>
  .memberDetail .el-row {
      line-height: 38px;
  }
  .memberDetail .el-row:nth-child(2n){
    margin-bottom: 12px;
  }
  .memberDetail .dataFormInfo .el-input{
    width: 80%;
  }
  .memberDetail .dataFormInfo .el-form-item__content{
    margin-left: 70px !important;
  }
  .memberDetail .dataFormInfo .el-form-item__label{
    padding: 0px !important;
    width: 70px !important;
  }
  .memberDetail .dataFormInfo .el-form-item{
    margin-bottom: 0px;
  }
</style>
